<template>
  <div class="hello">
    <router-view></router-view>
    <el-container style="border:1px solid #e3e3;width:100%; height:62px;">
        <el-header style="height: 60px;">
            <el-row>
                <el-col :span="4">
                    <router-link to="/search">
                        <span style="color:#22afff;font-size:28px;float:left;line-height:60px; ">
                            <span style="fone-size:36px;">(B-y-B) </span>school
                        </span>
                    </router-link>
                </el-col>
            
                <el-col :span="20" style="float:right;"> 
                    <el-menu :default-active="$route.path" :router="true" class="el-menu-demo" style="float:right;" mode="horizontal" @select="handleSelect">
                        <el-menu-item route="/" index="1">首页</el-menu-item>
                        <el-menu-item :route="item.url" :index="item.id" v-for="item in menudatas">{{item.nodename}}</el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">更多</template>
                            <el-menu-item index="2-1">前端编程</el-menu-item>
                            <el-menu-item index="2-2">后端编程</el-menu-item>
                            <el-menu-item index="2-3">日常用语</el-menu-item>
                            <el-menu-item index="2-4">手机对比</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">中文</template>
                            <el-menu-item index="js:alert1">中文</el-menu-item>
                            <el-menu-item index="js:alert1">English</el-menu-item>
                            <el-menu-item index="js:alert1">日本语</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title" ><i class="el-icon-setting" style="color:#409EFF;"></i><span style="color:#409EFF;">我的</span></template>
                            <el-menu-item index="4-1" route="/systemsettings">系统设置</el-menu-item>
                            <el-menu-item index="4-2" route="/updatepwd">修改密码</el-menu-item>
                            <el-menu-item index="4-3" route="/userinfo">个人信息</el-menu-item>
                            <el-menu-item index="4-4" route="/step1">申请主题</el-menu-item>
                        </el-submenu>
                    </el-menu>
                    <el-input v-model="searchTxt" placeholder="搜索文档" style="width:200px;float:right;line-height:60px;"></el-input>

                </el-col>
            </el-row>
        </el-header>
    </el-container>
    {{msg}} 
    <el-button-group>
      <el-button type="primary" icon="arrow-left">上一页</el-button>
      <el-button type="primary" icon="arrow-right">下一页</el-button>
    </el-button-group>

    <el-alert type="success" title="测试"></el-alert>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
